<template>
  <div>
    <div id="main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "linePicture",
  props: {
    title: "",
    tableChoice: "",
    unit: "",
  },
  data() {
    return {
      echartsList: [],
      isDownLoad: 0,
      list: [],
      decrementList: [],
      labelName: "",
      labelName1: "",
      dataColumn: [],
      dataColumn1: [],
      openColumn: [],
      openColumn1: [],
      worldMapContainer: {},
      dataArr: [],
      remarks: 1,
    };
  },
  mounted() {
    this.worldMapContainer = document.getElementById("main");
    //设置容器高宽
    this.isDownLoad = this.$route.query.download;
    this.resizeWorldMapContainer();
    this.remarks = this.$route.query.remarks;
    console.log("remarks", this.remarks);
  },
  created() {},

  methods: {
    //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
    resizeWorldMapContainer() {
      if (this.isDownLoad == 1) {
        this.worldMapContainer.style.width = "3840px";
        this.worldMapContainer.style.height = "2164px";
      } else {
        this.worldMapContainer.style.width = window.innerWidth - 270 + "px";
        this.worldMapContainer.style.height = window.innerHeight - 40 + "px";
      }
    },

    downloadFile(url, fileName) {
      var link = document.createElement("a");
      //设置下载的文件名
      document.body.appendChild(link);
      link.style.display = "none";
      link.href = url;
      link.download = fileName;
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL();
    },

    async drawLine(echartsList) {
      console.log("echartsList", echartsList);
      console.log("tableChoice", this.tableChoice);

      let dataArr = [];
      echartsList[0].dataList.map((mapItem) => {
        if (dataArr.length == 0) {
          dataArr.push({
            kind: mapItem.kind,
            List: [mapItem],
          });
        } else {
          let res = dataArr.some((item) => {
            //判断相同日期，有就添加到当前项
            if (item.kind == mapItem.kind) {
              item.List.push(mapItem);
              return true;
            }
          });
          if (!res) {
            //如果没找相同日期添加一个新对象
            dataArr.push({
              kind: mapItem.kind,
              List: [mapItem],
            });
          }
        }
      });
      console.log("dataArr", dataArr);
      this.dataArr = dataArr;
      let ylist = [];
      console.log("this.dataArr[0].list", dataArr[0].List);
      ylist = this.dataArr[0].List.map((item, index) => item.column_name);
      const arr = this.tableChoice.split(",");
      let arrr = arr.map((item) => item.split("|"));
      this.nameArr = arrr;
      console.log("nameArr", this.nameArr);
      this.echartsList = echartsList;
      this.list = this.echartsList[0].dataList;

      if (echartsList != null && echartsList.length > 0) {
        let e = this.echartsList[0].dataList;
        this.dataColumn = this.echartsList[0].dataColumn;
        this.openColumn = this.echartsList[0].openColumn;
        this.labelName = e[0][this.openColumn];
        let myChart = echarts.init(this.worldMapContainer);

        let option = {
          tooltip: {
            trigger: "axis",
            textStyle: {
              fontSize: 18,
            },
            axisPointer: {
              type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
            },
          },
          title: {
            text: this.title,
            x: "center",
            y: "top",
            textAlign: "left",
            textStyle: {
              fontSize: "22",
            },
          },
          animation: false,
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              saveAsImage: { show: true },
            },
          },

          legend: {
            x: "right", //可设定图例在左、右、居中
            padding: [10, 90, 0, 0],
            top: 20,
            right: -40,
            textStyle: {
              fontSize: "16",
              fontWeight: "",
            },
          },
          xAxis: {
            axisLabel: {},
            type: "value",
          },
          grid: {
            show: true,
            left: "10px",
            right: "10px",
            bottom: "10px",
            containLabel: true,
            borderWidth: 1,
            borderColor: "#D1D1D1",
            backgroundColor: "#fff",
            containLabel: true,
          },
          yAxis: {
            axisLabel: {},
            type: "category",
            data: ylist,
          },
          series: (() => {
            let serie = [];
            this.dataArr.map((item, index) => {
              console.log("item", item);
              let data = {
                name: item.kind,
                type: "bar",
                stack: "total",
                label: {
                  show: this.remarks == 0 ? false : true,
                  fontSize: "",
                },
                emphasis: {
                  focus: "series",
                },
                data: item.List.map((item1) => {
                  return item1.data;
                }),
              };
              console.log(data);
              serie.push(data);
            });
            console.log("serie", serie);
            return serie;
          })(),
          //  [
          //   {
          //     name: "出口",
          //     type: "bar",
          //     stack: "total",
          //     label: {
          //       show: true,
          //       fontSize: "",
          //     },
          //     emphasis: {
          //       focus: "series",
          //     },
          //     data: arr1,
          //   },
          // ],
        };
        option.yAxis.name = "单位：" + this.unit;
        if (this.isDownLoad == 1) {
          option.yAxis.nameTextStyle = {
            fontSize: 60, //  字体大小
            lineHeight: 36,
            padding: [80, 15, 4, 0], //  内填充
          };
          option.xAxis.axisLabel = { fontSize: "90", lineHeight: 150 };
          option.yAxis.axisLabel = { fontSize: "90" };
          option.yAxis.axisLabel = { fontSize: "90" };
          option.legend.textStyle.fontSize = 60;
          option.legend.textStyle.fontWeight = 60;
          option.legend.itemHeight = 20;
          option.legend.itemWidth = 40;
          option.legend.icon = "rect";
          option.legend.top = 90;
          option.grid.top = 170;
          option.grid.right = 150;
          option.title.textStyle.fontSize = 90;
          option.title.textStyle.lineHeight = 90;
          option.tooltip.textStyle.fontSize = 90;
          option.series[0].label.fontSize = 90;
          option.series[1].label.fontSize = 90;
          option.series[2].label.fontSize = 90;
          option.series[3].label.fontSize = 90;
          option.series[4].label.fontSize = 90;
          option.series[5].label.fontSize = 90;
        }
        myChart.setOption(option);

        if (this.isDownLoad == 1) {
          const chartImgUrl = myChart.getDataURL({
            pixelRatio: 1,
            backgroundColor: "",
            type: "png",
          });
          setTimeout(() => {
            this.downloadFile(chartImgUrl, this.title);
          }, 1000);
        }
      }
    },
  },
};
</script>

<style scoped>
#main {
  width: 100%;
  height: 900px;
}
</style>
